<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        table{
            width: 300px;
            height: 150px;
        }
    </style>
</head>
<body>
    

    <div id="app">
        <login></login>
        <table-data></table-data>
        <hr>
        <table-data></table-data>
        <hr>
        <table-data></table-data>
    </div>

    <template id="t1">
        <div>
            <table border="1" cellspacing="0" cellpadding="0">
                <tr v-for='(item, index) in list'>
                    <td><input type="checkbox" v-model='item.isChecked'></td>
                    <td>{{item.name}}</td>
                    <td>{{item.num}}</td>
                    <td>{{item.time}}</td>
                </tr>
            </table>
        </div>
    </template>

    <script src="../lib/Vue/vue.js"></script>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                
            },
            components: {
                login: {
                    template: `<div><button @click="login">登录</button><p>{{msg}}</p></div>`,
                    data() {
                        return {
                            msg: '还未登录，请登录'
                        }
                    },
                    methods: {
                        login() {
                            this.msg = '登录成功'
                        }
                    },
                },
                TableData: {
                    template: '#t1',
                    data() {
                        return {
                            list: [
                                {
                                    isChecked: false,
                                    id: 1,
                                    name: "张三",
                                    isIptShow: false,
                                    num: 10,
                                    time: new Date().toLocaleString()
                                },
                                {
                                    isChecked: false,
                                    id: 2,
                                    name: "李四",
                                    num: 10,
                                    isIptShow: false,
                                    time: new Date().toLocaleString()
                                },
                                {
                                    isChecked: true,
                                    id: 3,
                                    isIptShow: false,
                                    name: "王五",
                                    num: 10,
                                    time: new Date().toLocaleString()
                                }
                            ]
                        }
                    },
                }
            }
        })
    </script>
</body>
</html>